<template>
  <Box class="traffic-section-detail" :title="title" direction="column" >
    <!-- 第一行 -->
    <div class="row row-1">
      <Panel class="row-video" second align="center" title="G2_K1000+900_南京方向">
        <Switch render-type="video"></Switch>
      </Panel>

      <Panel class="row-qbb" second title="情报板" align="center">
        <Switch render-type="qbb" :list="qbbList"></Switch>
      </Panel>

      <Round :roundEvent="roundEvent" :roundGuest="roundGuest"></Round>
    </div>

    <!-- 第二行 -->
    <div class="row row-2">
      <Panel class="row-video" second align="center" title="G2_K1000+900_南京方向">
        <Switch render-type="video"></Switch>
      </Panel>

      <Panel class="line-chart-wraper" second>
        <ShadowLine :title="speedState.title" :xDate="speedState.xDate" :seriesData="speedState.seriesData">
        </ShadowLine>
      </Panel>
    </div>
  </Box>
</template>
<script>
export default {
  name: 'TrafficSectionDetail'
}
/**
 * @desc 拥堵路段详情 (3级)
 * @auther 邓清波
 * @date 2022/10/25
 * **/
</script>
<script setup>
import Switch from '../../components/detail/Switch.vue'
import { watch, reactive, ref, nextTick, defineProps, toRaw, getCurrentInstance, shallowRef } from 'vue'
import ShadowLine from '../../components/charts/ShadowLine.vue'
import Box from '../../components/detail/Box.vue'
import Panel from '../../components/panel'
import baseServiceApi from '../../api/base-service'
import trafficApi from '../../api/traffic'
import Round from '../../components/detail/Round.vue'
import useMapOperates from '@/hooks/useMapOperates'
import { lineColors } from '../../config/traffic'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})
const handleDark = useMapOperates()
const { proxy } = getCurrentInstance()
const title = shallowRef({})

// 断面车速
const speedState = reactive({
  seriesData: [
    {
      color: '#266BF4',
      data: []
    }
  ],
  gradientColor: [
    { offset: 0, color: 'rgb(158, 205, 245)' },
    { offset: 1, color: 'rgb(210, 229, 251)' }
  ],
  xDate: [],
  title: '拥堵路段断面车速'
})
const roundEvent = ref({
  accident: 2,
  construction: 3
}) // 附近事件
const roundGuest = ref({}) // 附近两客一危
const qbbList = ref([])

watch(
  () => props.data,
  (newV, pervV) => {
    nextTick(() => {
      title.value = newV.describe
      const path = (newV.path || []).map(i => i)

      getData()
      proxy.$mapSdk().setMapCenter(path)

      const lines = [
        {
          name: 'test',
          path: path,
          config: {
            lineWidth: 8,
            lineColor: lineColors[newV.jamTypeName],
            selectWidth: 10,
            selectColor: lineColors[newV.jamTypeName]
          }
        }
      ]
      const points = [
        { icon: 'zhdd-gl-sxj', path: path[0], name: 'test1', size: [30, 35], offset: [-15, -35] },
        { icon: 'zhdd-gl-sxj', path: path[path.length - 1], name: 'test2', size: [30, 35], offset: [-15, -35] },
        { icon: 'zhdd-gl-qbb', path: path[0], name: 'test4', size: [30, 35], offset: [-15, -35] }
      ]
      handleDark('marker', points)
      handleDark('polyline', lines)
    })
  },
  {
    deep: true,
    immediate: true
  }
)

/**
 * 获取拥堵路段详情
 * **/
function getData() {
  const params = {
    province: '32',
    roadType: '2',
    startStake: '1',
    endStake: '2',
    roadNum: '3'
  }
  // 断面车速
  trafficApi.getSpeedFlow(params).then(res => {
    const data = res.data
    console.log('断面车速', res.data)
    speedState.seriesData[0].data = data.value || []
    speedState.xDate = data.dateList || []
  })
  // 附近两课一危
  baseServiceApi.getRangeGuest({}).then(res => {
    const data = res.data || {}
    roundGuest.value.whc = data.dangerousArticles
    roundGuest.value.kc = (data.motorBus || 0) + (data.microBus || 0)
  })
  // 附近事件 ......

  // 情报版详情
  baseServiceApi
    .getInformationDetail({
      informationId: 'K219+500_CMS',
      roadType: '1'
    })
    .then(res => {
      qbbList.value = res.data || []
    })
}
</script>
<style scoped lang="less">
.row-qbb {
}

.row-2 {
  margin-top: 5px;
}

.row {
  display: flex;
  height: 50%;

  .row-video {
    width: 30%;
    flex: none !important;
  }

  .row-qbb {
    flex: 1;
    height: 100%;
  }

  .line-chart-wraper {
    flex: 1;
  }
}
</style>
